// Specified breakpoint
@mixin media($name) {
  @include media-breakpoint-only($name) {
    @content;
  };
}

// Larger than specified breakpoint
@mixin media-up($name) {
  @include media-breakpoint-up($name) {
    @content;
  };
}

// smaller than specified breakpoint
@mixin media-down($name) {
  @include media-breakpoint-down($name) {
    @content;
  };
}

// /******************************************
// *           Placeholder
// *******************************************/
@mixin placeholder() {
  &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    @content;
  }
  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    @content;
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
    @content;
  }
  &:-ms-input-placeholder { /* Internet Explorer 10-11 */
    @content;
  }
}


@mixin debug-map($map) {
  @at-root {
    @debug-map {
      __toString__: inspect($map);
      __length__: length($map);
      __depth__: depth($map);
      __keys__: map-keys($map);
      __properties__ {
        @each $key, $value in $map {
          #{'(' + type-of($value) + ') ' + $key}: inspect($value);
        }
      }
    }
  }
}
